<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://static.talkyun.com/frame/layui/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="https://static.talkyun.com/frame/layui/style/skin/default.css" media="all">
    <link rel="stylesheet" href="../css/style.css" media="all">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/common.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../js/api.js"></script>
    <script src="index.js"></script>
</head>

<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>用户管理</legend>
    </fieldset>

    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">用户名：</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">手机号：</label>
                <div class="layui-input-inline">
                    <input type="text" name="phone" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">职位：</label>
                <div class="layui-input-inline">
                    <input type="text" name="position" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
    </form>
    <div class="layui-form-item">
            <div class="layui-input-inline">
                <button class="layui-btn" id="demoSelect1" lay-filter="demoSelect1">查询</button>
            </div>
        </div>
    <table class="layui-hide" id="test" lay-filter="testevent"></table>

    <!--    模板scripty-->
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="addItem">添加</button>
        </div>
    </script>

    <!--    弹出窗的模板-->
    <script type="text/html" id="argSchemaTemplate">
        <form class="layui-form" action="">
            <!-- <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>添加</legend>
            </fieldset> -->

            <div class="layui-input-block" hidden>
                <input class="layui-input" type="text" name="id" value="{{d.id}}" autocomplete="off" placeholder="请输入id" />
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">用户名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" autocomplete="off" class="layui-input" value="{{d.name}}" placeholder="用户名称" />
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="password" autocomplete="off" class="layui-input" value="{{d.password}}" placeholder="请输入密码" />
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="phone" autocomplete="off" class="layui-input" value="{{d.phone}}" placeholder="请输入手机号" />
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">职位</label>
                    <div class="layui-input-inline">
                        <input type="text" name="position" autocomplete="off" class="layui-input" value="{{d.position}}" placeholder="请输入职位" />
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">菜单权限</label>
                    <div class="layui-input-inline">
                        <input type="checkbox" name="menuView" id="menuView" lay-skin="primary" title="是否可查看广告菜单权限" checked='value="{{d.menuView}}"'>
                      </div>
                </div>
            </div>
            <div class="layui-form-item">
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">提交</button>
                </div>
            </div>
        </form>
    </script>
    <script type="text/javascript">
        layuiModules = ['table', 'form', 'laydate', 'admin'];

        function mounted() {
            var form = layui.form,
                layer = layui.layer,
                laydate = layui.laydate;
            var table = layui.table;
            var $ = layui.$;
            var api = layui.api;
            var admin = layui.admin;

            var where = {
                pageNo: 1,
                pageSize: 10,
                friendkeyword: '',
                friendurl: ''
            };

            table.render({
                elem: '#test',
                url: api.user.all,
                cellMinWidth: 80,
                toolbar: '#toolbarDemo',
                defaultToolbar: {},
                page: false,
                contentType: "application/json",
                parseData: function (res) {
                    return {
                        "code": 0,
                        "msg": "",
                        "count": res.data.totalSize,
                        "data": res.data.result
                    }
                },
                done: function (res, curr, count) {
                    // loadPage(curr, count);
                },
                cols: [
                    [ {
                        field: 'id',
                        width: 120,
                        title: 'ID'
                    }, {
                        field: 'name',
                        width: 150,
                        title: '用户名'
                    }, {
                        field: 'password',
                        width: 120,
                        title: '密码'
                    }, {
                        field: 'phone',
                        title: '手机号',
                        width: 140
                    }, {
                        field: 'position',
                        title: '职位',
                        width: 140
                    }, {
                        field: 'menuView',
                        title: '权限',
                        width: 80
                    }, {
                        fixed: 'right',
                        width: 165,
                        align: 'center',
                        toolbar: '#barDemo'
                    }]
                ],
                where: where

            });

            form.render();

            // 后台接口分页参数不按Layui文档，自定义分页
            var repeat = [0, 0];

            function loadPage(curr, count) {
                if (repeat[0] == curr && repeat[1] == count) {
                    return false;
                }
                repeat[0] = curr;
                repeat[1] = count;
                layui.laypage.render({
                    elem: 'paging',
                    layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                    count: count, //总数
                    limit: 10, //每页显示的条数
                    skip: 1,
                    limits: [10, 20, 30, 40],
                    jump: function (obj) {
                        where.pageNo = obj.curr;
                        where.pageSize = obj.limit;
                        layui.table.reload('test', {
                            where: where
                        });
                        return false;
                    }
                });
            }

            //新增和编辑同一个  试一试
            function addItem(data) {
                console.log("addItem======>" + JSON.stringify(data))
                admin.req({
                    url: api.user.add,
                    data: data.field,
                    async: false,
                    success: function (res) {
                        layer.msg('新增成功');
                        layer.closeAll();
                        table.reload('test', { where: where });
                    }
                });
            }

            function updateItem(data) {
                admin.req({
                    url: api.user.update,
                    data: data.field,
                    async: false,
                    success: function (res) {
                        layer.msg('修改成功');
                        layer.closeAll();
                        table.reload('test', { where: where });
                    }
                });
            }
            //监听提交
            form.on('submit(demo1)', function (data) {
                if(data.field.menuView==='on'){
                    data.field.menuView = 1;
                }else{
                    data.field.menuView = 0;
                }
                if (data.field.id && data.field.id != 'undefined' && data.field.id != '') {
                    updateItem(data);
                } else {
                    data.field.id =0;
                    addItem(data);
                }
                return false;
            });
            $('#demoSelect1').click(function () {
                where.name = $("[name='name']").val();
                where.phone = $("[name='phone']").val();
                where.position = $("[name='position']").val();
                where.pageNo=1;
                where.pageSize=10
                console.log(where)
                layui.table.reload('test', {
                    where: where
                });
            });
            //监听头工具栏事件
            table.on('toolbar(testevent)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id),
                    data = checkStatus.data; //获取选中的数据
                switch (obj.event) {
                    case 'addItem':
                        layer.msg('添加');/*  */
                        openlayer({
                            name: "",
                            phone: "",
                            position: ""
                        });
                        break;
                };
            });

            //监听行工具事件
            table.on('tool(testevent)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data,
                    layEvent = obj.event;
                if (layEvent === 'detail') {
                    layer.msg('查看操作');
                } else if (layEvent === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del(); //删除对应行（tr）的DOM结构
                        layer.close(index);
                        //向服务端发送删除指令
                        admin.req({
                            url: `${api.user.delete}?id=${obj.data.id}`,
                            contentType: 'application/x-www-form-urlencoded',
                            async: false,
                            success: function (res) {
                                layer.msg('删除成功');
                            }
                        });
                    });
                } else if (layEvent === 'edit') {
                    layer.msg('编辑操作');
                    openlayer(data)
                }
            });
            function openlayer(data) {
                var templet = $('#argSchemaTemplate').html();
                layui.laytpl(templet).render(data, function (html) {
                    layer.open({
                        type: 1,
                        area: ['500px', '600px'],
                        title: '添加',
                        shade: 0.6 ,
                        maxmin: false  ,
                        anim: -1  ,
                        content: html,
                        success: function (layero, index) {
                            if (data.menuView===1) { //判断是否选中
                                $('#menuView').prop("checked", true); //设置选中 注意这里使用的是prop(), 这里要是使用了attr()是无效的
                            } else {
                                $('#menuView').prop("checked", false);
                            }
                            form.render();
                        }
                    });
                });
            }
        };
    </script>
</body>

</html>